(function() {
    var id = location.search.split("?")[1].split("=")[1]
    console.log(id);
    $.ajax({
        url: "http://127.0.0.1:8080/addcart/prodById",
        type: "get",
        data: { id: id }
    }).then(function(res) {
        console.log(res);
        var { data } = res
        console.log(data.img)
        var str = ``
        str += `
        <div class="middleimg">
        <img src="${data.img}">
        <div class="middleArea "></div>
    </div>

    <div class="small ">
        <ul>
            <li>
                <img src="${data.img} ">
            </li>
            <li>
                <img src="${data.img1} ">
            </li>
            <li>
                <img src="${data.img2} ">
            </li>
            <li>
                <img src="${data.img3}">
            </li>
            <li>
                <img src="${data.img4} ">
            </li>
        </ul>

    </div>
    <div class="bigArea">
        <img src="${data.img}" alt="">
    </div>


    <div class="Commodityinformation">
        <div class="Commodityinformation-one fl">
            <h3>${data.name}</h3>
            <span class="ospan1">5G全网通 | 8GB+256GB大存储 | 4800万高清AI三摄 | 4900mAh超大容量【新疆</br>西藏不发货】</span>
            <div class="Commodityinformation-two">
                <p class="fl"> 商 城 价： <span class="ospan">${data.price}</span> 市 场 价: <i>1999</i></p>
                <div class="pj fr">累计评价<span>3</span></div>
            </div>
            <div class="Commodityinformation-frou">
                <p class="op">服务:由乐视商城官方旗舰店 发挥并提供售后服务</p>
                <span>配送至: </span><span class="fr">付款成功后,预计<strong>48小时</strong>内发货</span>
            </div>
            <div class="guc">
                <div class="guc1">
                    <div class="oop onp">
                        <span class="fl">颜色:</span>
                        <p class="p fl"> 宝石蓝&nbsp;</p>
                    </div>
                </div>
                <div class="oop onp odp">
                    <p class="fl oop1">购买数量:</p>
                    <div class="gucq fl ce">+</div>
                    <div class="gucq1 fl ce1">1</div>
                    <div class="gucq2 fl ce">-</div>
                </div>


                <div class="butto">
                    <button class="btn1 but">立即购买</button>
                    <button class="btn2 but" style=" background:red">加入购物车</button>
                    <button class="sc">收藏</button>
                </div>
            </div>


        </div>
        <div class="Commodityinformation-onet fr">
            <span class="pp">商家满意度</span>
            <p class="opn1">乐视商城官方旗舰店</p>
            <ul>
                <li>商家描述:<i>4.8分</i></li>
                <li>服务态度:<i>4.8分</i></li>
                <li>发货速度:<i>4.8分</i></li>
            </ul>
            <p class="opn2"><span>店铺名称:</span> 乐视商城官方旗舰店<br>

                <button>进入店铺</button>
                <button>收藏店铺</button>
            </p>
        </div>

    </div>
    <div class="evaluate"></div>  
        `
        $(".magnifier").html(str)
        $(function() {
            $(".all-category ul li").on("mouseenter", function() {
                    //获取下标
                    var $index = $(this).index()
                    $(this).addClass("current").siblings().removeClass("current")
                    $(".Commodity-classis").children().eq($index).addClass("main").siblings().removeClass("main")
                })
                //

            $(".Commodity-classis").children().on("mouseleave", function() {
                $(".Commodity-classis").children().removeClass("main")
                $(".all-category ul li").removeClass("current")
                    // $(".ab").css("background-position", "-65px -21px")  
            })


            //全部商品分类  移入移出事件
            $(".Commodity").on("mouseenter", function() {
                $(".all-category").show()
                $(".ab").css("background-position", "-65px 0px")
                $(".Commodity-classis").show()
            }).on("mouseleave", function() {
                $(".all-category").hide()
                $(".Commodity-classis").hide()
                $(".ab").css("background-position", "-65px -21px")
            })

            //商品分类 隐藏事件

            // $("li").children().on("mouseenter", function() {
            //     $(this).css("color", "#dd5352")
            // }).on("mouseleave", function() {
            //     $(this).css("color", "")
            // })



            // $("li").on("mouseenter", function() {
            //     $(this).css("color", "#dd5352")
            // }).on("mouseleave", function() {
            //     $(this).css("color", "")
            // })
        })





        // 公式:  小图/大图=小区域/大区域
        // 只能修改小区域
        // 小区域=(小图/大图)*大区域
        // 比例=大区域/小区域
        $.fn.extend({
            magnifier() {
                var self = this
                    //小区域
                var $w = this.find(".middleimg img").width() / this.find(".bigArea img").width() * this.find(".bigArea").width()
                var $h = this.find(".middleimg img").height() / this.find(".bigArea img").height() * this.find(".bigArea").height()


                //设置比例
                var $extend = this.find(".bigArea").width() / this.find(".middleArea").width()

                this.find(".middleArea").css({
                    width: $w,
                    height: $h
                })
                this.find(".middleimg").on("mouseenter", function() {
                    self.find(".middleArea").show()
                    self.find(".bigArea").show()

                }).on("mouseleave", function() {
                    self.find(".middleArea").hide()
                    self.find(".bigArea").hide()
                }).on("mousemove", function(e) {
                    var disX = e.pageX - $(this).offset().left - self.find(".middleArea").width() / 2
                    var disY = e.pageY - $(this).offset().top - self.find(".middleArea").height() / 2

                    if (disX <= 0) {
                        disX = 0
                    }

                    if (disY <= 0) {
                        disY = 0
                    }
                    if (disX > self.find(".middleimg").width() - self.find(".middleArea").width()) {
                        disX = self.find(".middleimg").width() - self.find(".middleArea").width()
                    }
                    if (disY > self.find(".middleimg").height() - self.find(".middleArea").height()) {
                        disY = self.find(".middleimg").height() - self.find(".middleArea").height()
                    }


                    self.find(".middleArea").css({
                        left: disX,
                        top: disY
                    })
                    self.find(".bigArea img").css({
                        left: $extend * -disX,
                        top: $extend * -disY
                    })

                })

                $(this).find(".small")


                this.find(".small").on("click", "li", function() {
                    var index = $(this).index()
                        // let src = `dataimg${index+1}`
                        // console.log(`${src}`)
                        // self.find(".middleimg img").attr("src", `images/fdj${index+1}.jpg`)
                        // self.find(".bigArea img").attr("src", `${src}`)
                    if (index == 0) {
                        self.find(".middleimg img").attr("src", data.img)
                        self.find(".bigArea img").attr("src", data.img)
                    }
                    if (index == 1) {
                        self.find(".middleimg img").attr("src", data.img1)
                        self.find(".bigArea img").attr("src", data.img1)
                    }
                    if (index == 2) {
                        self.find(".middleimg img").attr("src", data.img2)
                        self.find(".bigArea img").attr("src", data.img2)
                    }
                    if (index == 3) {
                        self.find(".middleimg img").attr("src", data.img3)
                        self.find(".bigArea img").attr("src", data.img3)
                    }
                    if (index == 4) {
                        self.find(".middleimg img").attr("src", data.img4)
                        self.find(".bigArea img").attr("src", data.img4)
                    }



                })





            }


        })



        $(function() {
            $(".magnifier").magnifier()
        })

        $(function() {
            $(".gucq").on("click", function() {

                $(this).css("background", "red")
                $(".gucq1").html(parseInt($(".gucq1").html()) + 1)

            }).on("mouseleave", function() {
                $(this).css("background", "")
            })




            $(".gucq2").on("click", function() {

                $(this).css("background", "red")

                $(".gucq1").html(parseInt($(".gucq1").html()) - 1)

                if (parseInt($(".gucq1").html()) <= 1) {
                    parseInt($(".gucq1").html(1))
                }

            }).on("mouseleave", function() {
                $(this).css("background", "")
            })


            //点击跳转购物车
            $(".center-Shoppingcart").on("click", function() {
                location = "./Shopping cart page.html"




            })





        })

        //点击加入购物车
        $(function() {
            $(".btn2").on("click", function() {
                //获取cooie值
                // var OuserList = JSON.parse(Cookies.get("userList") || '[]')
                var OuserStorage = JSON.parse(localStorage.getItem("currentList") || '[]')
                console.log(OuserStorage);
                var obj = {
                    pname: $(".Commodityinformation-one h3").html(),
                    pImage: $(".middleimg img").attr("src"),
                    pprice: $(".Commodityinformation-two .ospan").html(),
                    pnum: $(".gucq1").html(),
                    puid: OuserStorage.uid
                }
                console.log(obj);

                $.ajax({
                        url: "http://127.0.0.1:8080/addcart/addtocart",
                        type: "post",
                        data: obj,
                        async: true

                    }).then(function(rester) {
                        var { msg, code } = rester
                        alert(msg)

                    })
                    // if (OuserList.length == 0) {
                    //     OuserList.push(obj)
                    //     Cookies.set("userList", JSON.stringify(OuserList), { expires: 10 })
                    //     return
                    // }
                    // var flage = false //默认已经加入购物车
                    // for (var i = 0; i < OuserList.length; i++) {

                //     if (OuserList[i].Image == obj.Image) {
                //         OuserList[i].num = parseInt(OuserList[i].num) + parseInt(obj.num)
                //         flage = true
                //         break
                //     }


                // }
                // if (flage) {
                //     Cookies.set("userList", JSON.stringify(OuserList), { expires: 10 })
                //     alert("成功加入购物车")
                // } else {
                //     OuserList.push(obj)
                //     Cookies.set("userList", JSON.stringify(OuserList), { expires: 10 })
                // }


            })




        })

        $(function() {
            $(".xq ul").children().on("click", function() {
                var $index = $(this).index()
                console.log($index)
                $(".xxxq").children().eq($index).show().siblings().hide()
            })


            $(".btn1").on("click", function() {
                location = "Shopping cart page.html"
            })

            var ouserList = JSON.parse(localStorage.getItem("currentList")) || '[]'
            console.log(ouserList.uname)
            if (ouserList.uname == undefined) {
                $(".Headnavigation-Edition ul ").find("li").eq(0).children("span").html("请登录")
            } else {
                $(".Headnavigation-Edition ul ").find("li").eq(0).children("span").html(ouserList.uname)
            }

        })
    })





})()